<!-- 
	订单支付页面
 -->
<template>
	<view class="order-all-box">
		<cu-custom :isBack="true" bgColor="bg-fa" id="custom">
			<block slot="content">我的订单</block>
		</cu-custom>
		<view class="tabbar-box" :style="{'top':CustomBar + 'px'}" id="tabbar">
			<view @tap="switchTab(index)" class="tabbar-item" v-for="(item,index) in tabList" :key="index" :class="{'tabbar-action':item.id == tabIndex}">
				{{item.name}}
			</view>
		</view>
		<!--  -->
		<swiper :current="tabIndex" :skip-hidden-item-layout="true" class="swiper" :autoplay="false" :style="{'height':contentHeight + 'px'}" @change="swiperChange">
			<swiper-item v-for="(tab,tb) in tabList" :key="tb">
				<scroll-view  scroll-y="true"  @scrolltolower="lower" class="scroll-y" :style="{'height':contentHeight + 'px'}">
					<view class="order-view" v-for="(item,index) in 20 " :key="index">
						<order-list @goodsTap="navDetail"></order-list>
					</view>
					<view style="padding: 20px 0;" v-if="isMore == false">
						<u-divider bg-color="#f1f1f1">没有更多了</u-divider>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>


<script>
	import orderList from "@/components/order-item.vue"
	export default{
		name:"order",
		data(){
			return {
				/*  顶部标题栏高度  */
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				tabList:[
					{id:0,name:"全部"},{id:1,name:"待付款"},
					{id:2,name:"待发货"},{id:3,name:"待收货"},
					{id:4,name:"待评价"},{id:5,name:"退货/退款"}
				],
				isMore:false,
				tabIndex:0,
				contentHeight:500,
			}
		},
		methods:{
			
			/*  swiper 改变  */
			swiperChange(e){
				this.tabIndex = e.detail.current
			},
			
			/*  点击顶部的Tab   */
			switchTab(index){
				this.tabIndex = index
			},
			
			/*  去订单详情页面  */
			navDetail(){
				uni.navigateTo({
					url:"/pages/order/detail"
				})
			},
			
			/*  滚动到底部  */
			lower(){
				if(this.isMore){
					console.log("aaaa")
				}
			},
			
			async getDomHeight(name){
				return new Promise((reslove,reject)=>{
					const query = uni.createSelectorQuery().in(this)
					query.select(name).boundingClientRect((data) => {
						reslove(data)
					}).exec();
				})
				
			}
		},
		async onReady() {
			let bar = await this.getDomHeight("#tabbar") 
			let _this = this
			uni.getSystemInfo({
				success: (res) => {
					_this.contentHeight = res.screenHeight - _this.CustomBar - bar.height
				}
			})
			
		},
		components:{
			orderList
		},
		onLoad() {
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F1F1F1;
	}
	.order-all-box{
		width: 100%;
		.tabbar-box{
			width: 100%;
			height: 64rpx;
			background: #FFFFFF;
			position: fixed;
			z-index: 55;
			top: 90rpx;
			left: 0;
			right: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			box-shadow: 0 0 8px rgba(0,0,0,0.2);
			.tabbar-item{
				line-height: 1.3;
				border-bottom: 4rpx solid transparent;
				height: 64rpx;
				line-height: 64rpx;
			}
			.tabbar-action{
				border-bottom: 4rpx solid #FA436A;
			}
		}
		.swiper{
			margin-top: 64rpx;
		}
		.order-view{
			width: calc(100% - 40rpx);
			margin-left: 20rpx;
			background: #FFFFFF;
			padding: 20rpx;
			margin-top: 20rpx;
			border-radius: 12rpx 12rpx;
		}
	}
</style>
